<template>
<view class="home">
		<!-- 选中月份 -->
	<view class="header">
		<picker  mode="date" :value="currentMon" fields="month" @change="selectMonth">
			
			<view class="headerMon">{{currentMon}}<iconfont icon="down_arrow"></iconfont>
			</view>
			
		</picker>
		<!--结余-->
		<view class="surBox">
			<view class="surTitle">本月结余</view>
			<view class="surMoney">{{surplus}}</view>
		</view>
		
		<!--支出收入-->
		    <view class="costBox">
		      <view class="costItem">
		        <view class="costTitle">本月支出</view>
		        <view class="costMoney">{{monthCost.pay}}</view>
		      </view>
		      <view class="costItem">
		        <view class="costTitle">本月收入</view>
		        <view class="costMoney">{{monthCost.income}}</view>
		      </view>
		    </view>
		
		</view>
		<!--按钮-->
			<view class="penBox">
			    <view class="penBtn" @click="navToRecore()">
			      <view class="pen">
			        <image src="../../static/pen.png"></image>
			      </view>
			    </view>
				</view>
	<!-- 数据列表 -->
	<view class="dateList" v-if="hasData">
		<!-- 某天数据 -->
		<view class="dayList" v-for="(item,index) in monthData">
			<!-- 上 信息 -->
			<view class="dayIofo">
				<!-- 左 日期 星期 -->
				<view class="infoLeft">
					<text>{{item.date}}</text>
					<text>{{item.week}}</text>
				</view>
				<!-- 右 收入 支出 -->
				<view class="infoRight">
					<text>支出:{{item.pay}}</text>
					<text>收入:{{item.income}}</text>
				</view>
			</view>
			<!-- 下列表 -->
			<view class="dayData"v-for="(value,key) in item.info" @click="navToDetail(value.id)">
				<!-- 左 图标 标题 -->
				<view class="dataLeft">
					<image :src="value.imgUrl"></image>
					<text :class="value.type">{{value.imgTitle}}</text>
				</view>
				<!-- 右 金额 -->
				<view class="dataRight" :class="value.type">{{value.type == 'pay' ? '-' : '+'}}￥{{value.money}}</view>
			</view>
		</view>			
	</view>
	<view class="nothing" v-else>
	    <image src="../../static/nothing.png"></image>
	    <view class="nothingText">还没有流水账单记录！！！</view>
	
	  </view>
	

</view>
	
</template>

<script>
	export default {
		data() {
			return {
				currentMon: '',
				hasDate:false,
				monthCost:{
					pay:0,
					income:0
				},
				surplus:"0.00",
				monthData:[],
				hasData:false,
				hasLogin:false,
				update:true,
				loginchange:false,
				openid: ''
			}
		},
		onLoad:function() {		
			this.getMonth();
			// uni.getStorage({
			// 	key:'openid',
			// 	success:function(res){
			// 		console.log(res.data);
			// 		this.openid = res.data;					
			// 	},
			// 	fail:function(res){
			// 		this.openid = '';
			// 	}
					
			// }),
		},
		onShow(){
			try {
			    const value = uni.getStorageSync('openid');
				
			    if (value) {
			        this.openid=value;
					this.loginchange=true;
					this.getMsgData(this.currentMon);
					
			    }else{
					
					this.openid = '';
					this.getMsgData(this.currentMon);
					uni.showToast({
						title:"先登录！！",
						icon:"none",
						mask:true
					})	
				}
				
			} catch (e) {
			    // error
			}
		},
		methods: {
			getMonth:function (){
				var time = new Date();

				var y = time.getFullYear();
				
				var m = time.getMonth()+1;
				var Mon=m+"/"+y;
				this.currentMon =Mon;
			},
			navToRecore(){
				uni.navigateTo({
					url: '../record/record',
					success: res => {
						// console.log("跳转成功")
					},
					fail: () => {},
					
				});
			},
			selectMonth : function (e){
				// console.log(e);
				
				var mon = e.target.value.split('-');
				var date = mon[1]+"/"+mon[0];
				this.currentMon = date;
				this.getMsgData(date);
			},
			getMsgData(month){
				var monArr = month.split("/");
				//获取查询月份的第一天日期
				var start = monArr[1] + "-" + this.addZero(monArr[0]) + "-01";
				
				// 获取最后一天日期 
				// new Date(年份, 月份, 0).getDate()  // 获取某月有多少天
				// 获取查询月份有多少天
				var dayNum =new Date(monArr[1],monArr[0],0).getDate();
				
				var end = monArr[1] + "-" + this.addZero(monArr[0]) + "-" + dayNum;
				// 清空总支出总收入
				this.monthCost.pay=0;
				this.monthCost.income=0;
				//清空月份数据
				this.monthData = [];
				//console.log(start,end);
				uni.request({
					url: 'http://175.178.80.92/index.php/index/record/serch',
					data:{
						startTime:start,
						endTime:end,
						openid:this.openid
					},
					header:{
						'content-type':'application/x-www-form-urlencoded'
					},
					method:'POST',
					success: (res) => {
						var data = res.data;
						//console.log(data);
						//判断数据是否为空
						if(data.length == 0){
							this.hasData = false;
						}else{
							 this.hasData = true;
						}
						var timeArr = [];
						data.forEach(v=>{
							// console.log(v.type);
							 this.monthCost[v.type] +=Number(v.money);
							 // indexOf(要查询的元素)， 数组/字符串的查询元素Api，如果数组/字符串里存在该查询元素则返回该元素对应下标，反之不存在则返回-1
							 if(timeArr.indexOf(v.date) == -1){
								 // 条件成立则说明该日期是第一次消费
								 timeArr.push(v.date);
							 }
						})
						timeArr.sort().reverse();
						// console.log(timeArr);
						
						timeArr.forEach(t=>{
							var dataObj = {};
							var arr = t.split("-");
							dataObj.date = arr[0] + "年" + arr[1] + "月" + arr[2] + "日";
							//根据日期获取星期
							var weekNum = new Date(t).getDay();
							// console.log(weekNum)
							switch(weekNum){
								case 0:
								dataObj.week = "星期日";
								break;
								case 1:
								dataObj.week = "星期一";
								break;
								case 2:
								dataObj.week = "星期二";
								break;
								case 3:
								dataObj.week = "星期三";
								break;
								case 4:
								dataObj.week = "星期四";
								break;
								case 5:
								dataObj.week = "星期五";
								break;
								case 6:
								dataObj.week = "星期六";
								break;
								
							}
							dataObj.pay = 0;
							dataObj.income = 0;
							dataObj.info = [];
							data.forEach(d=>{
								if(d.date == t){
									dataObj[d.type]+=Number(d.money);
									dataObj.info.push(d)
								}
							})
							dataObj.info.reverse();
							//保留俩个小数
							dataObj.pay = dataObj.pay.toFixed(2);
							dataObj.income = dataObj.income.toFixed(2);
							this.monthData.push(dataObj)
						})
						// console.log("monthData=>",this.monthData)
						
						this.surplus = (this.monthCost.income - this.monthCost.pay).toFixed(2);
						
						this.monthCost.pay = this.monthCost.pay.toFixed(2);
						
					    this.monthCost.income = this.monthCost.income.toFixed(2);
					},
					fail:err =>{
						console.log("获取数据失败",err)
						
					}
				})
				this.update = false;
				this.update = true;
			},
			addZero(num){
				
				return num < 10 ? "0" + num : num;
				
			},
			navToDetail(e){
				// console.log(e);
				uni.navigateTo({
					url: '../detail/detail?id='+e,
					success:function(res){
					},
					fail:function(res){
						console.log(res);
					}
				})
			}
	
			
		}
			
	}
	
</script>

<style>
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.header{
	  background-color:#28B298;
	  height: 400rpx;
	  /* height: 400rpx; */
	  padding: 0 20rpx;
	  color: #fff;
	}
	.header .surBox{
	  text-align: center;
	}
	.header .surBox .surTitle,
	.header .costBox .costItem .costTitle{
	  font-size: 28rpx;
	}
	.header .surBox .surMoney{
	  font-size: 40rpx;
	  font-weight: bold;
	  margin-top: 10rpx;
	}
	.penBox{
	  position: relative;
	  height: 90rpx;
	}
	.penBox .penBtn{
	  position: absolute;
	  top: -90rpx;
	  left: 50%;
	  margin-left: -90rpx;
	  width: 180rpx;
	  height: 180rpx;
	  border-radius: 50%;
	  background-color: #fff;
	}
	.penBox .penBtn .pen{
	  width: 140rpx;
	  height: 140rpx;
	  background-color: #28B298;
	  border-radius: 50%;
	  margin: 20rpx;
	}
	.penBox .penBtn .pen image{
	  width: 100rpx;
	  height: 100rpx;
	  margin: 20rpx;
	}
	.header .costBox{
	  /*display: flex; 将该元素设置为弹性盒子，默认该元素里的所有子元素都会水平方向排列，类似于所有子元素向左浮动，但不会脱离文档流*/
	  display: flex;  /*flex布局 弹性布局*/
	  margin-top: 20rpx;
	  padding-bottom: 40rpx;
	}
	.header .costBox .costItem{
	  width: 50%;
	  text-align: center;
	}
	.header .costBox .costItem .costMoney{
	  font-size: 36rpx;
	  font-weight: bold;
	  margin-top: 10rpx;
	}
	/* 数据列表样式 */
	.dateList{
	  padding: 0 20rpx;
	}
	.dayList .dayInfo{
	  display: flex;
	  /* 设置子元素之间的间距相同 */
	  justify-content: space-between;
	  font-size: 24rpx;
	  color: #999;
	}
	.dayList .dayInfo .infoLeft text{
	  margin-right: 8rpx;
	}
	.dayList .dayInfo .infoRight text{
	  margin-left: 8rpx;
	}
	.dayData{
	  display: flex;
	  justify-content: space-between;
	  height: 120rpx;
	  line-height: 120rpx;
	  font-size: 32rpx;
	}
	.dayData .dataLeft image{
	  width: 100rpx;
	  height: 100rpx;
	  vertical-align: middle;
	}
	.dayData .dataLeft text{
	  font-weight: bold;
	}
	.dayData .dataRight{
	  font-weight: bold;
	}
	
	/* 没有数据的样式 */
	.nothing image{
	  width: 250rpx;
	  height: 162rpx;
	  display: block;
	  margin: 140rpx auto 0;
	}
	.nothingText{
	  text-align: center;
	  font-size: 28rpx;
	  color: #999;
	  margin-top: 40rpx;
	}
	.pay{
		color: #28B298;
	}
	.income{
		color: #DD524D;
	}
</style>
